<template>
  <div class="selection-component">
      <div class="selection-show" @click="show">
          <span>{{this.newDate[this.nowIndex].name}}</span>
          <div class="arrow"></div>
      </div>
      <div class="selection-list" v-show="downxl">
          <ul>
              <li v-for="(item,index) in newDate"  @click="selectList(index)">{{item.name}}</li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
  name:'downMenu',
  data(){
      return{
      downxl:false,
      nowIndex:0
      }
  },
  //父亲传过来的数据
  props:{
       newDate:{
           //这里显示的是测试数据 数据在父元素上
         type:Array,
          default:function(){
          return [
         {
            name:'初级版',
            value:1
        }
    ]
      }
       }
  },
  methods:{
      show(){
          this.downxl=!this.downxl;
      },
     selectList(index){
         //你选择谁的索引 我就把谁显示出来
         this.nowIndex=index;
          this.downxl=false;
          this.$emit('downmenu',this.newDate[index].value);
            //vuex调用要改变的组件方法
         this.$store.dispatch('updateOrder',["downmenu",this.newDate[index].value])
      }
  }
}
</script>

<style scoped>
.selection-component{
    position: relative;
    display:inline-block;
    
}
.selection-show{
    border:1px solid #e3e3e3;
    padding:0 20px 0 10px;
    
}
.selection-show .arrow{
    display:inline-block;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid #e3e3e3;
    width:0;
    height: 0;
    margin-top:-1px;
    margin-left:6px;
    margin-right:-14px;
    vertical-align:middle;
}
.selection-list{
    display:inline-block;
    position: absolute;
    left:0;
    top:25px;
    width:100%;
    background: #ffffff;
    border-top:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;
    z-index:5;
}
.selection-list  li{
    padding:5px 15px 5px 10px;
    border-left:1px solid #e3e3e3;
    border-right:1px solid #e3e3e3;
    cursor: pointer;
    background: #ffffff;
    white-space:nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}
.selection-list li:hover{
    background:#e3e3e3;
}
</style>
